<template>
    <el-container>
        <el-header>
            <el-card class="top">
                <div class="top-word">
                    我的会员
                </div>
            </el-card>
        </el-header>
        <!-- 头像 -->
        <el-main>
            <el-card>
                <div class="vip">
                    <!-- 头像 昵称 -->
                    <div class="vipUser">
                        <img class="userAvatar" src="../images/01.jpg" alt="">
                        <div class="word">
                            <p class="user-name">楠楠不难</p>
                            <p class="user-vip">尊贵的会员</p>
                        </div>
                    </div>
                    <div class="saving">开通会员平均每年可省：￥9500</div>
                    <!-- 季度会员 -->
                    <div class="price-area">
                        <div class="price-block">
                            <div class="price-box">
                                <div class="price-box-main">
                                    <p class="price-title">季度会员</p>
                                    <div price="middle">
                                        ￥
                                        <span class="middle-box-num">98</span>
                                        <span class="middle-box-word">/季</span>
                                    </div>
                                    <p class="total">合计￥98（青少年专属）</p>
                                </div>
                                <div class="price-box-main">
                                    <p class="price-title">季度会员</p>
                                    <div price="middle">
                                        ￥
                                        <span class="middle-box-num">98</span>
                                        <span class="middle-box-word">/季</span>
                                    </div>
                                    <p>合计￥98（青少年专属）</p>
                                </div>
                                <div class="price-box-main active">
                                    <p class="price-title">季度会员</p>
                                    <div price="middle">
                                        ￥
                                        <span class="middle-box-num">98</span>
                                        <span class="middle-box-word">/季</span>
                                    </div>
                                    <p>合计￥98（青少年专属）</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 按钮部分 -->
                    <div class="btn-area">
                        <button class="btn-area-btn">
                            <span class="btn-area -word">立即以588元开通</span>
                        </button>
                    </div>
                    <!-- 协议部分 -->
                    <div class="argument">
                        <span class="argument-left">开通即视为同意</span>
                        <span class="argument-right">《会员服务协议》</span>
                    </div>
                </div>
                <!-- 会员专属权益 -->
                <div class="member-benefits">
                    <div class="member-benefits-title">会员专属权益</div>
                    <ul class="member-benefits-list">
                        <li class="list-item">
                            <div class="list-item-box">
                                <span><img class="icon" src="https://rs.dance365.com/teach_video_free.png"></span>
                                <div class="list-item-word"> 
                                    <p><span style="color: rgb(249, 54, 132);">213</span>个会员专区</p>
                                    <p>课程免费学习</p>
                                </div>
                            </div>
                        </li>
                        <li class="list-item">
                            <div class="list-item-box">
                                <span><img class="icon" src="https://rs.dance365.com/member_preferential.png"></span>
                                <div class="list-item-word"> 
                                    <p>非会员专区课程</p>
                                    <p>可获会员立减优惠</p>
                                </div>
                            </div>
                        </li>
                        <li class="list-item">
                            <div class="list-item-box">
                                <span><img class="icon" src="https://rs.dance365.com/member_screen@2x.png"></span>
                                <div class="list-item-word"> 
                                    <p><span style="color: rgb(249, 54, 132);">213</span>个会员专区</p>
                                    <p>课程免费学习</p>
                                </div>
                            </div>
                        </li>
                        <li class="list-item">
                            <div class="list-item-box">
                                <span><img class="icon" src="https://rs.dance365.com/update_music@3x.png"></span>
                                <div class="list-item-word"> 
                                    <p><span style="color: rgb(249, 54, 132);">213</span>个会员专区</p>
                                    <p>课程免费学习</p>
                                </div>
                            </div>
                        </li>
                        <li class="list-item">
                            <div class="list-item-box">
                                <span><img class="icon" src="https://rs.dance365.com/music_clip@3x.png"></span>
                                <div class="list-item-word"> 
                                    <p><span style="color: rgb(249, 54, 132);">213</span>个会员专区</p>
                                    <p>课程免费学习</p>
                                </div>
                            </div>
                        </li>
                        <li class="list-item">
                            <div class="list-item-box">
                                <span><img class="icon" src="https://rs.dance365.com/member_photo_download1@3x.png"></span>
                                <div class="list-item-word"> 
                                    <p><span style="color: rgb(249, 54, 132);">213</span>个会员专区</p>
                                    <p>课程免费学习</p>
                                </div>
                            </div>
                        </li>
                        <li class="list-item">
                            <div class="list-item-box">
                                <span><img class="icon" src="https://rs.dance365.com/lv_ad@3x.png"></span>
                                <div class="list-item-word"> 
                                    <p><span style="color: rgb(249, 54, 132);">213</span>个会员专区</p>
                                    <p>课程免费学习</p>
                                </div>
                            </div>
                        </li>
                        <li class="list-item">
                            <div class="list-item-box">
                                <span><img class="icon" src="https://rs.dance365.com/lv_accelerate.png"></span>
                                <div class="list-item-word"> 
                                    <p><span style="color: rgb(249, 54, 132);">213</span>个会员专区</p>
                                    <p>课程免费学习</p>
                                </div>
                            </div>
                        </li>
                        <li class="list-item">
                            <div class="list-item-box">
                                <span><img class="icon" src="https://rs.dance365.com/course_equity.png"></span>
                                <div class="list-item-word"> 
                                    <p><span style="color: rgb(249, 54, 132);">213</span>个会员专区</p>
                                    <p>课程免费学习</p>
                                </div>
                            </div>
                        </li>
                        <li class="list-item">
                            <div class="list-item-box">
                                <span><img class="icon" src="https://rs.dance365.com/course_equity.png"></span>
                                <div class="list-item-word"> 
                                    <p><span style="color: rgb(249, 54, 132);">213</span>个会员专区</p>
                                    <p>课程免费学习</p>
                                </div>
                            </div>
                        </li>
                        <li class="list-item">
                            <div class="list-item-box">
                                <span><img class="icon" src="https://rs.dance365.com/member_logo.png"></span>
                                <div class="list-item-word"> 
                                    <p><span style="color: rgb(249, 54, 132);">213</span>个会员专区</p>
                                    <p>课程免费学习</p>
                                </div>
                            </div>
                        </li>
                        <li class="list-item">
                            <div class="list-item-box">
                                <span><img class="icon" src="https://rs.dance365.com/update_equity.png"></span>
                                <div class="list-item-word"> 
                                    <p><span style="color: rgb(249, 54, 132);">213</span>个会员专区</p>
                                    <p>课程免费学习</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </el-card>
        </el-main>
    </el-container>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {getVip} from '../../../api/my/index'
onMounted(()=>{
    // serVip()
})
// const serVip = async()=>{ 
//     const groupType = 1
//    const result = await getVip(groupType)
//    console.log(result);
   
// }
</script>

<style scoped>
.top-word{
    font-size: 14px;
}
.active {
    border: 2px solid #f93684 !important;
    background-color: #f9ebf1;
    color: #f93684;
}

.vip {
    border-bottom: 1px solid #e3e3e3;
}

.vipUser {
    margin-top: 20px;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.userAvatar {
    display: inline-block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #ccc;
    /* margin: 0 auto; */
}

.word {
    margin: 0 10px;
}

.user-name {
    font-size: 20px;
    color: #000;
}

.user-vip {
    margin-top: 14px;
    font-size: 14px;
    color: #f93684;
}

.saving {
    text-align: center;
    margin-top: 19px;
}

/* 季度会员 */
.price-block {
    width: 720px;
    margin: 21px auto 0;
}

.price-box {
    margin-top: 30px;
    display: flex;
}

.price-box-main {
    margin-right: 30px;
    width: 220px;
    height: 124px;
    border: 1px solid #b1b5c1;
    border-radius: 10px;
    text-align: center;
    display: flex;
    align-content: stretch;
    flex-direction: column;
    justify-content: space-evenly;
}

.price-title {
    line-height: 16px;
    font-size: 16px;
}

.middle-box-num {
    font-size: 26px;
}

.middle-box-word {
    font-size: 16px;
}

.total {
    font-size: 14px;
}

/* 按钮 */
.btn-area {
    width: 330px;
    display: block;
    margin: 0 auto;
    /* background-color: aqua; */
}

.btn-area-btn {
    width: 330px;
    height: 56px;
    font-size: 16px;
    margin: 30px auto 12px;
    border-radius: 10px;
    background: linear-gradient(-56deg, #ff4683, #ff638f);
    color: #fff;
    border: none;
}

/* 协议 */
.argument {
    text-align: center;
    font-size: 14px;
    margin: 10px 5px;
}

.argument-right {
    color: #f93684;
    margin: 0px 5px;
}
.member-benefits{
    border-bottom: 1px solid #e3e3e3;
    margin:20px 0;
    padding-bottom: 25px;
}

/* 会员专属权益 */
.member-benefits-title {
    color: #111;
    font-weight: 700;
    font-size: 20px;
    margin-top: 32px;
}

.member-benefits-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding-left: 19px;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    color: #111;
    font-weight: 400;
    margin: 20px 0 5px;
}
.list-item{
    margin-right: 10px;
    margin-bottom: 20px;
    width: 129px;
    height: 129px;
    border: 1px solid palevioletred;
    border-radius: 8px;
    text-align: center;
    padding: 14px 0 0;
    font-size: 14px;
}
.list-item-box{
    margin: 10px 0;
}
.icon{
    display: block;
    margin: 0 auto;
    width: 46px;
    height: 42px;
    background-size: cover;
}
.list-item-word{
    margin: 15px 0;
}
</style>